<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="All Rights Reserved, Copyright (C) 2013, Wuyeguo, Ltd." />
<title>EasyUI Web Admin Power by Wuyeguo</title>
<link rel="stylesheet" type="text/css" href="../easyui/1.5.3/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../css/wu.css" />
<link rel="stylesheet" type="text/css" href="../css/icon.css" />
<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../easyui/1.5.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../easyui/1.5.3/locale/easyui-lang-zh_CN.js"></script>
<script src="../js/jquery.serializejson.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',split:true" title="West" style="width:200px;">
    	
			<ul id="tt"></ul>
			
			<a href="javascript:void(0)" onclick="addRootNode()">添加根节点</a> 
			<a href="javascript:void(0)" onclick="editNode()">修改</a>
			<a href="javascript:void(0)" onclick="remove()">删除</a>
    </div>
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
        	<form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
        		根目录:<input type="text" name="parentId" id="parentId"/>
	            <div style="margin-bottom:20px">
	                <input class="easyui-textbox" id="te" name="text" style="width:100%" data-options="label:'分类名称:',required:true">
	            </div>
	            
	        </form>
	          <div style="text-align:center;padding:5px 0">
	            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:57px">Submit</a>
	            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:48px">Clear</a>
	        </div>
    </div>
</div>


<script type="text/javascript">
	var nodeId = null;
	
	/**
	* Name 载入菜单树
	*/
	$('#tt').tree({
		animate:true,
		url:'http://localhost:3000/cate/list',
		method:'get',
		onClick:function(node){
//			console.log(node);
			$('#parentId').val(node._id);
		}
	});
	
	function remove(){
		var node = $('#tt').tree('getSelected');
		console.log(node._id);
		var id = node._id;
		
		$.ajax({
			type:"delete",
			url:"http://localhost:3000/cate/data/"+id
		}).then(function(res){
//			console.log(res);
			$('#tt').tree('reload');
		});
	}

	function submitForm(){
		$('#ff').form('submit',{
			onSubmit:function(){
				if($(this).form('enableValidation').form('validate')){
//					console.log($('#ff').serializeJSON());
					//如果nodeId存在，不为null，那么，表单提交就是提交到修改的地址，否则，则是新增
					var postUrl;
					if(nodeId !== null){
						postUrl = 'http://localhost:3000/cate/data/' + nodeId;
					}else{
						postUrl = 'http://localhost:3000/cate/data';
					}
					
					var formData = $('#ff').serializeJSON();
					if(formData.parentId.length === 0){
						delete formData.parentId;
					}
					
					$.ajax({
						type:"post",
						url:postUrl,
						data:formData
					}).then(function(res){
						$('#tt').tree('reload');
					});
				}else{
					alert('表单验证失败！');
				}
			}
		});
	}

	function addRootNode(){
		$('#parentId').val('');
	}


</script>

</body>
</html>